<div id="userM" v-cloak>
    <el-row :gutter="20" class="no-margin">
        <el-col :span="20">
        <el-form   >
            <el-form-item label=""  label-width="100%">
            </el-form-item>
            <el-form-item label="显示正常用户"  label-width="100" style=" margin-bottom: 0px;">
                <el-switch on-text="正常" off-text="所有" v-model="userStatus"></el-switch>
            </el-form-item>
        </el-form>
        </el-col>
    </el-row>
    <el-row :gutter="20" class="no-margin">
        <el-col :span="16">

            <!--<div class="toolbar">-->
                <!--<el-form :inline="true" :model="formData" class="demo-form-inline">-->
                    <!--<el-form-item >-->
                        <!--<el-input class="el-input&#45;&#45;small" v-model="formInput.key" placeholder="请输入关键字" size="small"  class="input-username"></el-input>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item>-->
                        <!--<el-button type="success" @click="onSearchFwTeam"  icon="search" size="small">查询</el-button>-->
                        <!--<el-button type="primary" @click="addFwTeam" size="small"><i class="el-icon-plus" ></i> 增加</el-button>-->
                        <!--<el-button @click="handleEdit" type="primary" icon="edit" size="small">修改</el-button>-->
                    <!--</el-form-item>-->
                <!--</el-form>-->
            <!--</div>-->
            <!--prop="teamName"-->
            <el-table :data="teams"  border style="min-height:400px;"  v-on:row-click="editUser">
                    <kf-table-tree-column
                            ref="treeColumn"

                            accordion="true"
                            disabled:false
                            label="部门用户"
                            align="left"
                            header-align="center" min-width="280" >
                        <template scope="scope">
                            <span v-if="scope.row.teamName">{{scope.row.teamName}}</span>
                            <span v-if="scope.row.userCnName">{{scope.row.userCnName}}</span>
                        </template>
                    </kf-table-tree-column >
                    <el-table-column label="账号"  min-width="120" >
                        <template scope="scope">
                            <!--<span v-if="scope.row.teamName">{{scope.row.remark}}</span>-->
                            <span v-if="scope.row.isUser">{{scope.row.userName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态"  min-width="60" >
                        <template scope="scope">
                            <!--<span v-if="scope.row.teamName">{{scope.row.remark}}</span>-->
                            <span v-if="scope.row.userStatus==0&&scope.row.isUser">失效</span>
                            <span v-if="scope.row.userStatus==1&&scope.row.isUser">正常</span>
                        </template>
                    </el-table-column>
                <!--<el-table-column label="照片"  min-width="120" >-->
                    <!--<template scope="scope">-->
                        <!--&lt;!&ndash;<span v-if="scope.row.teamName">{{scope.row.remark}}</span>&ndash;&gt;-->
                        <!--<el-button @click="checkPicture(scope)" type="text" v-if="scope.row.isUser" style="color: #53faff">查看照片</el-button>-->
                    <!--</template>-->
                <!--</el-table-column>-->
                    <!--<el-table-column label="状态"  min-width="80" >-->
                    <!--<template scope="scope">-->
                    <!--<el-tag :type="scope.row.teamStatus || scope.row.teamStatus==1?'success':'warning'" close-transition>{{scope.row.teamStatus || scope.row.teamStatus==0?'正常':'失效'}}</el-tag>-->
                    <!--</template>-->
                    <!--</el-table-column>-->
                    <el-table-column label="操作"  min-width="80">
                        <template scope="scope">
                            <el-button @click="addFwUser(scope.row)" type="text" title="添加用户" v-if="!scope.row.isUser" >添加</el-button>
                            <el-button @click="editFwUser(scope.row)" type="text" title="编辑"v-if="scope.row.isUser" >编辑</el-button>
                            <!--<el-button @click="handleEdit(scope.row)" type="text" title="值班配置" v-if="scope.row.isUser">值班配置</el-button>-->
                        </template>
                    </el-table-column >
            </el-table>
        </el-col>
        <el-col :span="8">
            <el-collapse v-model="activeNames" @click.stop="handleChange">
                <el-collapse-item name="2" v-if="routeType=='dept'">
                    <template slot="title">
                        <div @click.stop="handleChange" >{{currentUser.userCnName}}角色
                            <i class="header-icon el-icon-setting" @click="updateUserRole()" ></i></div>
                    </template>
                    <template>
                        <el-table ref="teamTable" :data="currentUser.roles" style="width: 100%">
                            <el-table-column type="index"></el-table-column>
                            <el-table-column property="roleCode" label="角色编码"></el-table-column>
                            <el-table-column property="roleName" label="角色名称"></el-table-column>
                        </el-table>
                    </template>
                </el-collapse-item>
            </el-collapse>


        </el-col>
    </el-row>


     <el-dialog title="选择角色" :visible.sync="userRole" size="small" :before-close="handleCloseUserRole">
        <div class="transfer-wrapper">
            <kf-table-transfer v-model="myRoles" :data="dataRoles" :titles="['未选角色','已选角色']" >
                <template slot="left-columns">
                    <el-table-column label="角色编码" prop="roleCode" header-align="center"></el-table-column>
                    <el-table-column label="角色名" prop="roleName" header-align="center"></el-table-column>
                </template>
                <template slot="right-columns">
                    <el-table-column label="角色编码" prop="roleCode" header-align="center"></el-table-column>
                    <el-table-column label="角色名" prop="roleName" header-align="center"></el-table-column>
                </template>
            </kf-table-transfer>
            <!--<el-transfer v-model="myRoles" :data="dataRoles"></el-transfer>-->
        </div>
        <span slot="footer" class="dialog-footer">
		    <el-button @click="userRole = false" size="small">取 消</el-button>
		    <el-button type="primary" @click="confirmUserRoles" size="small">确 定</el-button>
		  </span>
    </el-dialog>
    <el-dialog :title="editFormTitle" :visible.sync="editFormVisible" size="small" :before-close="handleCloseForm" >
        <el-form v-if="editFormVisible" :model="formData" :rules="rules" ref="editForm">
            <el-form-item label="部门名称" prop="teamName" :label-width="formLabelWidth">
                <el-input v-model="formData.teamName" auto-complete="off">{{formData}}</el-input>
            </el-form-item>

            <!--<el-form-item label="状态" prop="teamStatus" :label-width="formLabelWidth">-->
                <!--<el-switch on-text="正常" off-text="失效" v-model="formData.teamStatus"></el-switch>-->
            <!--</el-form-item>-->
            <el-form-item label="备注" prop="remark" :label-width="formLabelWidth">
                <el-input v-model="formData.remark" auto-complete="off">{{formData}}</el-input>
            </el-form-item>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
		    <el-button @click="editFormVisible = false" size="small">取 消</el-button>
		    <el-button type="primary" @click="formConfirm" size="small">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog  :title="editOrAdd" :visible.sync="userForm" size="small" :before-close="handleCloseUserForm" >
        <el-form :model="userFormData" :rules="userRoles" ref="userFormData">
            <el-form-item label="用户名" prop="userName" :label-width="formLabelWidth">
                <el-input v-model="userFormData.userName" placeholder="请输入您的用户名" auto-complete="off" :autofocus="true"></el-input>
            </el-form-item>
            <el-form-item label="登录密码" prop="newPwd" :label-width="formLabelWidth">
                <el-input v-model="userFormData.newPwd" type="password" placeholder="请输入您的登录密码" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户中文名" prop="userCnName" :label-width="formLabelWidth">
                <el-input v-model="userFormData.userCnName" placeholder="请输入您的中文名" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone" :label-width="formLabelWidth">
                <el-input v-model="userFormData.phone" placeholder="请输入您的联系电话" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱" prop="email" :label-width="formLabelWidth">
                <el-input v-model="userFormData.email" placeholder="请输入您的电子邮箱" auto-complete="off"></el-input>
            </el-form-item>
            <!--
            <el-form-item label="头像" prop="faceImg" :label-width="formLabelWidth">
              <el-input v-model="formData.faceImg" auto-complete="off">{{formData}}</el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark" :label-width="formLabelWidth">
              <el-input v-model="formData.remark" auto-complete="off">{{formData}}</el-input>
            </el-form-item>
            -->
            <el-form-item label="用户状态" prop="userStatus" :label-width="formLabelWidth">
                <el-switch on-text="正常" off-text="失效" v-model="userFormData.userStatus"></el-switch>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
		    <el-button @click="userForm = false" size="small">取 消</el-button>
		    <el-button type="primary" @click="userFormConfirm" size="small">确 定</el-button>
        </span>
    </el-dialog>


    <!--查看照片-->
    <el-dialog :visible.sync="checkPictureVisible"
               title="查看照片"
               width="300px">
        <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

    </el-dialog>
</div>
